<template>
  <div @click="bodyClick($event)" class="settleItem">

    <div class="settleItem_con"
    :style="{'height':(winHei-65)+'px'}">

        <!-- <div class="home_Left"
        :style="{'height':(winHei-65)+'px'}">
          <div class="noFile">
            <div class="upFileBox">
              <div class="upFileBoxCon">
                <img src="@/assets/img/home/upFile.png" alt="">
                <span>点击上传token文件</span>
              </div>
              <input type="file">
            </div>
          </div>
        </div> -->

        <div class="settleItem_con_main"
        :style="{'width':(winWid-50)+'px'}">

          <div class="settleItem_con_main_top">

            <div @click.stop="" class="selDateBox">

                <div class="selDateBoxMain">
                  <input :class="{'inpFocus':cur_inp==0}" v-model="inp_00" @focus="op_cl(0,true,true)" type="text" placeholder="开始日期">
                  <img class="trans" src="@/assets/img/date/trans.png" alt="">
                  <input :class="{'inpFocus':cur_inp==1}" v-model="inp_01" @focus="op_cl(1,true,true)" type="text" placeholder="结束日期">
                  <img class="date" src="@/assets/img/date/date_ico.png" alt="">
                </div>

                <Calendar ref="riLi"></Calendar>
            </div>

            <div @click="item_tatistics(1)" class="cxBtn">
              查询
            </div>

          </div>


          <div class="settleItem_con_main_mid">

            <table cellpadding="0" cellspacing="0" border="0">

              <tr>
                <th>
                  提交时间
                </th>
                <th>
                  token
                </th>
                <th>
                  结算状态
                </th>
                <th>
                  结算详情
                </th>
                <!-- <th>
                  操作
                </th> -->
              </tr>

              <tr
              v-for="(settleItem_It,settleItem_Idx) in settleItemList"
              :key="'settleItem_It_'+settleItem_Idx">
                <td>
                  {{settleItem_It.time}}
                </td>
                <td>
                  <div @click.stop="show_Token(settleItem_Idx)" class="viewBtn">
                    查看
                  </div>
                </td>
                <td>
                  <span v-if="settleItem_It.status==0" class="txt">
                    未结算
                  </span>
                  <span v-else class="txt">
                    已结算
                  </span>
                </td>
                <td>
                  <div @click.stop="show_fee(settleItem_Idx)" class="viewBtn">
                    查看
                  </div>
                </td>
                <!-- <td>
                  <div class="settleItem_Del">
                    删除
                  </div>
                </td> -->
              </tr>
            </table>
            <FenYe v-if="settleItemList.length!==0" ref="myFenye" :last_page="settleItemList_last_page"></FenYe>
            <div v-else class="noData">
              <div class="noDataCon">
                <img src="@/assets/img/user/noData.png" alt="">
                <span>
                  No Data
                </span>
              </div>
            </div>
          </div>


        </div>

    </div>

    <div v-show="is_show_logistics" class="logistics_info">
        <div @click.stop="" class="logistics_infoMain">
          <div class="top">

            <h4 class="wuliu_title">
              {{logistics_title}}
            </h4>

            <div class="wuliu">
              <ul v-show="logistics_title=='Token'">
                <li v-for="(token_It,token_Idx) in token_arr"
                :key="'token_It_0'+token_Idx">
                  <span>
                    {{token_It}}
                  </span>
                </li>
              </ul>
              <ul class="jie_suan" v-show="logistics_title=='结算详情'">
                  <li>
                    <span>
                      {{item_info.total_money}}
                    </span>
                  </li>
                  <li>
                    <span>
                      {{item_info.totalorder}}
                    </span>
                  </li>
                  


                  <li>
                    <span>
                      {{item_info.advance}}
                    </span>
                  </li>
                  <li>
                    <span>
                      {{item_info.settlement}}
                    </span>
                  </li>

                  <li v-for="(fee_It,fee_Idx) in fee_arr"
                  :key="'fee_It_0'+fee_Idx">
                      <span>
                         {{fee_It}}
                      </span>
                    </li>  
        
              </ul>
            </div>

          </div>
          <div class="bot">
              <dl>
                <dt @click="setVis('is_show_logistics',false)">
                  确定
                </dt>
                <dd @click="setVis('is_show_logistics',false)">
                  取消
                </dd>
              </dl>
          </div>
        </div>
    </div>

  </div>
</template>

<script>
import FenYe from "@/components/vuePagination.vue";
import Calendar from "@/components/calendar.vue"
export default {
  name: 'CreateItem',
  data(){
    return{
      inp_00:"",
      inp_01:"",
      cur_inp:null,
      settleItemList:[],
      settleItemList_last_page:null,
      is_show_logistics:false,//false true
      token_arr:[],
      logistics_title:'',
      fee_arr:[],
      item_info:{
        advance:'',
        settlement:'',
        total_money:'',
        totalorder:''
      }
    }
  },
  components: {
    Calendar,
    FenYe
  },
  activated() {
    let that=this;
    that.inp_00=that.init_date(Number(new Date())-1000*60*60*24*7);
    that.inp_01=that.init_date(Number(new Date()));
    that.item_tatistics(1);
  },
  methods:{
    init_date(val){
      let that=this;
      let year,month,day,cur_time,hour,mins;
      console.log("val_123:"+new Date(val));
      cur_time=new Date(val);
      year=cur_time.getFullYear();
      month=(cur_time.getMonth()+1)>9?(cur_time.getMonth()+1):("0"+(cur_time.getMonth()+1));
      day=cur_time.getDate();
      hour=cur_time.getHours()>9?cur_time.getHours():("0"+cur_time.getHours());
      mins=cur_time.getMinutes()>9?cur_time.getMinutes():("0"+cur_time.getMinutes());
      console.log('year:'+year+'month:'+month+'day:'+day);
      return year+'-'+month+'-'+day+" "+hour+":"+mins;
    },
    setVis(x,y){
      let that=this;
      that[x]=y;
    },
    show_Token(val){
      let that=this;
      that.logistics_title='Token';
      that.token_arr=that.settleItemList[val].tokenlist;
      that.setVis('is_show_logistics',true);
    },
    show_fee(val){
      let that=this;
      that.logistics_title='结算详情';
      that.fee_arr=that.settleItemList[val].freightlist;
      that.item_info=that.settleItemList[val];
      that.setVis('is_show_logistics',true);
    },
    //订单结算
    item_tatistics(val){
      let that=this;
      this.$request.get(
           `/api/order/settle_accounts`,
           {
            start_time:that.inp_00+":00",
            end_time:that.inp_01+":00",
            pageSize:10,
            pageNo:val
           },
           {

           }
        ).then((res)=>{
            console.log("订单结算请求成功：",res);

            if(res.data.code==1){
              let allcount=res.data.data.count;
              if(allcount%10==0){
                that.settleItemList_last_page=allcount/10;
              }else{
                that.settleItemList_last_page=Math.floor(allcount/10)+1;
              }
              that.settleItemList=res.data.data.list;
            }
        })
        .catch((err)=>{
          console.log("订单结算请求失败：",err);
        });
    },
    bodyClick(e){
      let that=this;
      that.is_show_logistics=false;
      this.$refs.riLi.operateFn(that.cur_inp,false,false);
    },
    op_cl(x,y,z){
      let that=this;
      console.log("this.$refs.riLi:",this.$refs.riLi);
      this.cur_inp=x;
      this.$refs.riLi.operateFn(x,y,z);
    },
    getDate(x,y){
      let that=this;
      console.log("getDate_x:",x,"getDate_y:",y);

      let timeStr=y.Y+"-"+(y.M<10?("0"+y.M):y.M)+"-"+(y.D<10?("0"+y.D):y.D)+" "+(y.H<10?("0"+y.H):y.H)+":"+(y.Min<10?("0"+y.Min):y.Min);
      console.log("timeStr:",timeStr);
      if(x==0){
        console.log("输入框1");
        that.inp_00=timeStr;
      }else{
        console.log("输入框2");
        that.inp_01=timeStr;
      }

    }
  }
}
</script>
<style lang="less" scoped>
  .settleItem{
    width: 100%;
    .settleItem_Del{
      color: #d71345;
      font-size: 14px;
      height: 28px;
      line-height: 28px;
      border: 1px solid #d71345;
      padding: 0 15px;
      cursor: pointer;
      display: inline-block;
    }
    .logistics_info{
      position:fixed;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      z-index: 10;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .logistics_infoMain{
        background-color: #fff;
        border-radius: 3px;
        padding: 0 15px;
        width: 400px;
        box-shadow: 0 0 16px #ddd;
        .top{
          padding: 20px 0;
          .wuliu{
            padding-top: 10px;
            border-top: 1px solid #f0f0f0;
            color: #666;
            font-size: 14px;
            line-height: 22px;
            margin-top: 10px;
            ul{
              display: flex;
              flex-direction: roe;
              flex-wrap: wrap;
              overflow: hidden;
              li{
                border: 1px solid #d9d9d9;
                border-radius: 3px;
                background-color: #fafafa;
                margin-top: 8px;
                margin-right: 5px;
                span{
                  display: block;
                  color: #575757;
                  font-size: 12px;
                  line-height: 22px;
                  padding: 0 5px;
                }
              }
            }
          }
        }
        .bot{
          padding:10px 0;
            border-top: 1px solid #f0f0f0;
            dl{
              display: flex;
              flex-direction: row-reverse;
              dt,dd{
                height: 30px;
                line-height: 30px;
                padding: 0 14px;
                cursor: pointer;
                border-radius: 3px;
                font-size: 14px;
                border: 1px solid #f47920;
              }
              dt{
                background-color: #f47920;
                color: #fff;
                margin-left: 10px;
              }
              dd{
                color: #595959;
                border-color: #d9d9d9;
                transition: .3s;
              }
              dd:hover{
                color: #f47920;
                border-color: #f47920;
              }
            }
        }
      }
    }
    .noData{
    	background-color: #fff;
    	padding: 100px 0;
    	display: flex;
    	flex-direction: row;
    	justify-content: center;
    	.noDataCon{
    		width: 74px;
    		img{
    			display: block;
    			width: 100%;
    		}
    		span{
    			display: block;
    			color: #bfbfbf;
    			text-align: center;
    			font-size: 15px;
    			line-height: 24px;
    		}
    	}
    }
    .settleItem_con{
      overflow-y: auto;
      display: flex;
      flex-direction: row-reverse;
        .home_Left{
        	width: 200px;
        	background-color: #fff;
        	overflow-y: auto;
        	display: flex;
          position: fixed;
          left: 0;
          bottom: 0;
          height: 100%;
        	.noFile{
        		display: flex;
        		flex-direction: column;
        		justify-content: center;
        		align-items: center;
        		width: 100%;
        		.upFileBox{
        			width: 144px;
        			height: 144px;
        			background-color: #fafafa;
        			border: 1px dashed #d9d9d9;
        			position: relative;
        			.upFileBoxCon{
        				width: 144px;
        				height: 144px;
        				display: flex;
        				flex-direction: column;
        				justify-content: center;
        				align-items: center;
        				img{
        					display: block;
        					width: 36px;
        					height: 36px;
        				}
        				span{
        					display: block;
        					text-align: center;
        					color: #252525;
        					font-size: 12px;
        					line-height: 22px;
        					margin-top: 15px;
        				}
        			}
        			input{
        				display: block;
        				position: absolute;
        				top: 0;
        				left: 0;
        				width: 100%;
        				height: 100%;
        				opacity: 0;
        				cursor: pointer;
        			}
        		}
        	}

        	.upFileBox:hover{
        		border-color: #ff8040;
        	}
        }
        .settleItem_con_main{
          padding: 25px;
          .settleItem_con_main_top{
            display: flex;
            flex-direction: row;
            .selDateBox{
              border: 1px solid #d9d9d9;
              background-color: #fff;
              position: relative;
              .selDateBoxMain{
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 0 10px;
                input{
                  display: block;
                  border: none;
                  outline: none;
                  height: 33px;
                  line-height: 33px;
                  font-size: 13px;
                  width: 130px;
                  border-bottom: 1px solid transparent;
                  transition: .3s;
                }

                input::placeholder{
                  color: #bfbfbf;
                  font-size: 13px;
                  line-height: 34px;
                }

                .inpFocus{
                  border-color: #f47920;
                }

                img{
                  display: block;
                }
                .trans{
                  width: 10px;
                  height: 4px;
                  margin-right: 15px;
                }
                .date{
                  width: 12px;
                  height: 12px;
                }
              }
            }

            .cxBtn{
              margin-left: 15px;
              height: 36px;
              line-height: 36px;
              font-size: 14px;
              color: #fff;
              background-color: #f47920;
              padding: 0 15px;
              cursor: pointer;
              border-radius: 3px;
            }
          }

          .settleItem_con_main_mid{
            margin-top: 20px;
            table{
            	width: 100%;
            	tr{
            		th{
            			background-color: #fafafa;
            			text-align: center;
            			padding:15px 10px;
            			color: #252525;
            			font-size: 14px;
            			height: 20px;
            			line-height: 20px;
            			position: relative;
            			font-weight: normal;
            		}
            		th:not(:last-child):after{
            			content: "";
            			position: absolute;
            			top: 0;
            			right: 0;
            			bottom: 0;
            			margin: auto;
            			width: 1px;
            			height: 20px;
            			background-color: #ebebeb;
            		}
            		td{
            			background-color: #fff;
            			text-align: center;
            			padding:10px;
            			border-top: 2px solid #f0f2f5;
            			color: #595959;
            			font-size: 13px;
            			height: 30px;
            			line-height: 30px;
                  .viewBtn{
                    color: #deab8a;
                    font-size: 13px;
                    height: 30px;
                    line-height: 30px;
                    cursor: pointer;
                  }
            		}
            	}
            	tr:hover td{
            		background-color: #fafafa;
            	}
            }
          }

        }
    }

    .jie_suan{
      flex-direction: column;
      align-items: flex-start;
    }
  }
</style>
